<script setup lang="ts">

import {AppConfig} from "../../config";
import {t} from "../../lang";
import UpdaterButton from "../../components/common/UpdaterButton.vue";
import {useSettingStore} from "../../store/modules/setting";
import FeedbackTicketButton from "../../components/common/FeedbackTicketButton.vue";

const setting = useSettingStore()
const licenseYear = new Date().getFullYear()

const doOpenLog = async () => {
    await window.$mapi.file.openPath(window.$mapi.log.root())
}
</script>

<template>
    <div class="p-4">
        <div class="flex items-center">
            <div class="flex-grow text-2xl">
                关于我们
            </div>
        </div>
        <div class="pt-4">
            <div class="flex mb-3 items-start">
                <div class="w-20">{{ t('版本') }}</div>
                <div class="flex-grow">
                    <div>
                        v{{ AppConfig.version }}
                        Build {{ setting.buildInfo.buildId }}
                    </div>
                    <div class="pt-2">
                        <UpdaterButton/>
                    </div>
                </div>
            </div>
            <div class="flex mb-3 items-center">
                <div class="w-20">{{ t('官网') }}</div>
                <div class="flex-grow">
                    <a :href="AppConfig.website" target="_blank"
                       class="text-link">
                        {{ AppConfig.website }}
                    </a>
                    <div class="inline-block ml-3">
                        <FeedbackTicketButton />
                    </div>
                    <a-button class="ml-3"
                              size="mini"
                              @click="doOpenLog">
                        <template #icon>
                            <icon-file/>
                        </template>
                        {{ t('日志') }}
                    </a-button>
                </div>
            </div>
            <div class="flex mb-3 items-center">
                <div class="w-20">{{ t('声明') }}</div>
                <div class="flex-grow">
                    {{ t('本产品为开源软件，遵循 AGPL-3.0 license 协议。') }}
                </div>
            </div>
            <div class="mb-3">
                <a :href="AppConfig.websiteGithub"
                   target="_blank"
                   class="bg-gray-100 dark:bg-gray-700 w-48 mr-1 rounded-lg py-2 px-8 inline-flex items-center mb-3 hover:shadow-lg">
                    <img src="./../../assets/image/github.svg" class="w-12 h-12 mr-2"/>
                    <div class="flex-grow">Github</div>
                </a>
                <a :href="AppConfig.websiteGitee"
                   target="_blank"
                   class="bg-gray-100 dark:bg-gray-700 w-48 mr-1 rounded-lg py-2 px-8 inline-flex items-center hover:shadow-lg">
                    <img src="./../../assets/image/gitee.svg" class="w-12 h-12 mr-2"/>
                    <div class="flex-grow">Gitee</div>
                </a>
            </div>
            <div class="text-gray-400">
                &copy; {{ licenseYear }} {{ AppConfig.name }}
            </div>
        </div>
    </div>
</template>

